<template>
	<view>
		<uNavbar title="历史成交" bgColor="#E0DDDA" ></uNavbar>
		<view class="tab-nav">
			<view class="tab-nav-item"  :class="{ active: item.select}" v-for="(item,index) in tablist" :key="index" @click="clickToggleHandle(item)">
				{{item.name}}
			</view>
		</view>
		<view class="main">
			<view class="tit">
				<text class="name">配件</text>
				<text class="time">时间</text>
				<text class="price" >价格</text>
			</view>
			<view class="item" v-for="item in selllist" :key="item.id" >
				<text class="text1" >{{item.name}}</text>
				<text class="text2">{{item.transaction_time}}</text>
				<text class="text3" >￥{{item.price}}</text>
			</view>
			<noDatas :xxxList="selllist"  :showMore="false"></noDatas>
		</view>
		<view class="empty2">
			
		</view>
	</view>
</template>

<script>
	import { orderList} from "../../api/myphone.js"
	export default {
		data() {
			return {
				tablist:[
					{
						name:"我购买的",
						id:1,
						select:true
					},{
						name:"我出售的",
						id:2,
						select:false
					},

				],
				selllist:[],
				page: 1,
				size: 20,
				selnum: "",
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				selid:1
			}
		},
		onLoad() {
			this.getselllist()
		},
		methods: {
			getselllist(){
				orderList({
					page:this.page,
					type:this.selid
				}).then(res=>{
					if (res.code == 1) {
						let list = res.data.data;
						this.selllist = this.page == 1 ? list : this.selllist.concat(list);
						// console.log(this.goodlist2);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
					
				})
			},
			clickToggleHandle(ele) {
				this.tablist.forEach(item => item.select = false)
				this.selid=ele.id
				this.page=1
				this.getselllist()
				ele.select = true
			
			},
			
		},
		onReachBottom() {
				if (this.status != 'nomore') {
					this.page = this.page + 1
					this.getselllist()
				}
		},
	}
</script>
<style>
	
</style>
<style scoped lang="scss">
/deep/ .u-navbar__content__title{
	color: #333 !important;
}
/deep/.uicon-arrow-left{
	color: #333 !important;
}
.tab-nav{
	width: 690rpx;
	height: 64rpx;
	background: #E0DDDA;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
	.tab-nav-item{
		width: 50%;
		height: 64rpx;
		text-align: center;
		line-height: 64rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #666;
	}
}
.active {
		position: relative;
		font-weight: 700;
		color: #333333 !important;
	}

	.active::before {
		content: '';
		position: absolute;
		bottom: -4rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 62rpx;
		height: 6rpx;
		background: #A68A64;
	}
.main{
	width: 690rpx;
	// height: 1222rpx;
	padding-bottom: 40rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	margin: 0 auto;
	margin-top: 52rpx;
	background: #F2F2F2;
	.tit{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 400;
		font-size: 32rpx;
		color:#666666;
		padding-top: 20rpx;
		.name{
			margin-left: 70rpx;
		}
		.price{
			margin-right: 80rpx;
		}
	}
	.item{
		width: 690rpx;
		display: flex;
		align-items: center;
		margin-top: 24rpx;
		.text1{
			width: 150rpx;
			text-align: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			margin-left: 30rpx;
			margin-right: 30rpx;
		}
		.text2{
			width: 170rpx;
			text-align: center;
			font-weight: 400;
			font-size: 26rpx;
			color:#666666;
			margin-left: 50rpx;
		}
		.text3{
			width: 170rpx;
			text-align: right;
			font-weight: 400;
			font-size: 26rpx;
			color:#666666;
			margin-left: 50rpx;
		}
	}
}
</style>